<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>LEFT TEMPLATE</title>
		
		<!-- CSS -->
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/social-icons.css" type="text/css" media="screen" />
	
		<!-- THEME -->
		<link rel="stylesheet" href="skins/paper-brown/style.css" type="text/css" media="screen" />
		
		<!-- JS -->
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jqueryui.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
		<script type="text/javascript" src="js/quicksand.js"></script>
		<script type="text/javascript" src="js/custom.js"></script>
		<!--[if IE]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<!-- ENDS JS -->
		
		<!--[if IE 6]>
			<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
			<script>
	      		/* EXAMPLE */
	      		//DD_belatedPNG.fix('*');
	    	</script>
		<![endif]-->		
		
		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="css/superfish.css" /> 
		<link rel="stylesheet" media="screen" href="css/superfish-left.css" /> 
		<script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script>
		<script type="text/javascript" src="js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->
		
		<!-- poshytip -->
		<link rel="stylesheet" href="js/poshytip-1.0/src/tip-twitter/tip-twitter.css" type="text/css" />
		<link rel="stylesheet" href="js/poshytip-1.0/src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
		<script type="text/javascript" src="js/poshytip-1.0/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->
		
		<!-- Tweet -->
		<link rel="stylesheet" href="css/jquery.tweet.css" media="all"  type="text/css"/> 
		<script src="js/tweet/jquery.tweet.js" type="text/javascript"></script> 
		<!-- ENDS Tweet -->
		
		<!-- Fancybox -->
		<link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
		<script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
		<!-- ENDS Fancybox -->
		
		<!-- jflickrfeed -->
		<link href="css/jflickrfeed.css" rel="stylesheet" type="text/css" media="screen" /> 
		<script src="js/jflickrfeed/jflickrfeed.js"></script>
		
		<link href="js/jflickrfeed/colorbox/colorbox.css" rel="stylesheet" type="text/css" media="screen" /> 
		<script src="js/jflickrfeed/colorbox/jquery.colorbox.js"></script>
		<!-- ENDS jflickrfeed -->
		
		<!-- prettyPhoto -->
		<script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
		<!-- ENDS prettyPhoto -->
		
		
				
		<!-- Nivo slider -->
		<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
		<script src="js/nivo-slider/jquery.nivo.slider.js" type="text/javascript"></script>
		<!-- ENDS Nivo slider -->
		
		<!-- tabs -->
		<link rel="stylesheet" href="css/tabs.css" type="text/css" media="screen" />
		<script type="text/javascript" src="js/tabs.js"></script>
  		<!-- ENDS tabs -->

		<!--[if IE 7]>
			<link rel="stylesheet" type="text/css" media="screen" href="css/ie7-hacks.css" />
		<![endif]-->
		<!--[if IE 8]>
			<link rel="stylesheet" type="text/css" media="screen" href="css/ie8-hacks.css" />
		<![endif]-->
		<!-- ENDS CSS -->	
		
	</head>
	<body>
	
	<!-- WRAPPER -->
	<div id="wrapper">
	
		<!-- SIDEBAR -->
		<div id="sidebar">
			<!-- logo -->
			<a href="index.php"><img src="img/logo.png" alt="Left template" id="logo" /></a>
						
			<!-- search -->
			<form  method="get" id="searchform" action="#">
				<div>
					<input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
					<input type="submit" id="searchsubmit" value=" " />
				</div>
			</form>
			<!-- ENDS search -->
						
			<!-- Navigation -->
			<ul id="nav" class="sf-menu sf-vertical">
				<li ><a href="index.php">首页</a></li>
                
                <li><a href="gallery.php">画廊</a>
                    <ul>
                        <li><a href="gallery.php">图片库</a>
                            <ul>
                                <li><a href="gallery.php">两列布局</a></li>
                                <li><a href="gallery-fourcols.php">四列布局</a></li>
                            </ul>
                        </li>
                        <li><a href="gallery-video.php">视频库</a></li>
                    </ul>
                </li>
                <li class="current-menu-item"><a href="blog.php">博客</a>
                    <ul>
                        <li><a href="blog.php">博客全文</a></li>
                        <li><a href="blog-compact.php">博客简介</a></li>
                    </ul>
                </li>
                
                <li><a href="contact.php">联系方式</a></li>
                <li><a href="http://www.cssmoban.com/">立即下载!</a></li>
            </ul>
            <!-- Navigation --> 
                    
            <!-- categories -->
            <ul class="cat-list">
                <li><h6>分类</h6></li>
                <li><a href="#" title="View posts">设计1 (11)</a></li>
                <li><a href="#" title="View all posts">网页1 (6)</a></li> 
                <li><a href="#" title="View all posts">照片1 (3)</a></li>
                <li><a href="#" title="View all posts">编码1 (16)</a></li>
                <li><a href="#" title="View all posts">设计2 (41)</a></li>
                <li><a href="#" title="View all posts">网页2 (6)</a></li> 
                <li><a href="#" title="View all posts">照片2 (5)</a></li> 
                <li><a href="#" title="View all posts">编码2 (23)</a></li>
            </ul>
            <!-- categories --> 
            
            
            
            <!-- Social -->
            <ul class="social">
                <li><h6>关注我们</h6>
                <li><a href="#" class="facebook" title="成为粉丝"></a></li>
                <li><a href="#" class="twitter" title="我们的微博"></a></li>
                <li><a href="#" class="dribbble" title="我们的工作"></a></li>
                <li><a href="#" class="addthis" title="告诉大家"></a></li>
                <li><a href="#" class="vimeo" title="我们的视频"></a></li>
                <li><a href="#" class="youtube" title="我们的YouTube"></a></li>
            </ul>
			<!-- ENDS Social -->

		</div>
		<!-- ENDS SIDEBAR -->
		
		<!-- MAIN -->
		<div id="main">

			<!-- HEADER -->
			<div id="header">
				<div id="page-title">画廊</div>
				<!-- Breadcrumb-->
				<div id="breadcrumbs">
					你的位置: 
					<a title="Home" href="#">首页</a> &raquo; 
					<a title="Features" href="#">画廊</a>
				</div>
				<!-- ENDS Breadcrumb-->	
			</div>
			<!-- ENDS HEADER -->
			
			<!-- CONTENT --> 
			<div id="content">
						
				<!-- PAGE CONTENT -->
				<div id="page-content">
				
					<!-- filter -->
					<div class="filter">
						<div class="filter-top">&nbsp;</div>
						<div class="filter-main">
							<ul id="portfolio-filter">
					    		<li><a href="#" rel="all" > All </a></li>
					    		<li><a href="#" rel="web" > Web </a></li>
					    		<li><a href="#" rel="illustration">  Illustration </a></li>
					    		<li><a href="#" rel="photo" >Photo</a></li>
					    		<li><a href="#" rel="web" >Web</a></li>
					    		<li><a href="#" rel="illustration">Illustration</a></li>
					    		<li><a href="#" rel="photo" >Photo</a></li>
					    		<li><a href="#" rel="web" >Web</a></li>
					    	</ul>
					    </div>
				    	<div class="filter-bottom">&nbsp;</div>
			    	</div>
					<!-- filter -->
					
					<!-- Thumbnails -->
					<ul id="portfolio-list" class="gallery-thumbs" >
						<li class="web">
							<span></span>
							<a class="boxgrid  fancybox" href="img/dummies/272x250.jpg" title="The road" >
								<img class="cover" src="img/dummies/272x250.jpg" alt="The Road" title="The Road"/>
								<div class="box-content">
									<em>Lorem Ipsum  </em>
									Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
								</div>
							</a>
						</li>
						<li class="web">
							<span></span>
							<a class="boxgrid  fancybox" href="img/dummies/272x250.jpg" title="The road" >
								<img class="cover" src="img/dummies/272x250.jpg" alt="The Road" title="The Road"/>
								<div class="box-content">
									<em>Lorem Ipsum  </em>
									Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
								</div>
							</a>
						</li>
						<li class="illustration">
							<span></span>
							<a class="boxgrid  fancybox" href="img/dummies/272x250.jpg" title="The road" >
								<img class="cover" src="img/dummies/272x250.jpg" alt="The Road" title="The Road"/>
								<div class="box-content">
									<em>Lorem Ipsum  </em>
									Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
								</div>
							</a>
						</li>
						<li class="illustration">
							<span></span>
							<a class="boxgrid  fancybox" href="img/dummies/272x250.jpg" title="The road" >
								<img class="cover" src="img/dummies/272x250.jpg" alt="The Road" title="The Road"/>
								<div class="box-content">
									<em>Lorem Ipsum  </em>
									Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
								</div>
							</a>
						</li>
						<li class="photo">
							<span></span>
							<a class="boxgrid  fancybox" href="img/dummies/272x250.jpg" title="The road" >
								<img class="cover" src="img/dummies/272x250.jpg" alt="The Road" title="The Road"/>
								<div class="box-content">
									<em>Lorem Ipsum  </em>
									Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
								</div>
							</a>
						</li>
						<li class="photo">
							<span></span>
							<a class="boxgrid  fancybox" href="img/dummies/272x250.jpg" title="The road" >
								<img class="cover" src="img/dummies/272x250.jpg" alt="The Road" title="The Road"/>
								<div class="box-content">
									<em>Lorem Ipsum  </em>
									Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
								</div>
							</a>
						</li>
						<li class="web">
							<span></span>
							<a class="boxgrid  fancybox" href="img/dummies/272x250.jpg" title="The road" >
								<img class="cover" src="img/dummies/272x250.jpg" alt="The Road" title="The Road"/>
								<div class="box-content">
									<em>Lorem Ipsum  </em>
									Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
								</div>
							</a>
						</li>
						<li class="web">
							<span></span>
							<a class="boxgrid  fancybox" href="img/dummies/272x250.jpg" title="The road" >
								<img class="cover" src="img/dummies/272x250.jpg" alt="The Road" title="The Road"/>
								<div class="box-content">
									<em>Lorem Ipsum  </em>
									Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
								</div>
							</a>
						</li>
					</ul>
					<!-- ENDS Thumbnails -->	
					
					
					<!-- Pagination -->
					<ul class='pager'>
						<li class="first-child"><a href="#">prev</a></li>
						<li class="active"><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li class="last-child"><a href="#">next</a></li>
					</ul>
					<!-- ENDS Pagination -->
	
					
				</div>
				<!-- ENDS PAGE-CONTENT -->
			
			</div>
			<!-- ENDS CONTENT -->
			
		</div>
<div>
    <aside style="position:absolute;top:0;right:100px;width:400px;margin:20px;">
    <img src="./img/wu.jpg" alt="" width="400" height="280">
        <nav>
        <h2><a href="/">个人博客</a></h2>
        <br>
        <ul>
            <li><a href="http://itbyc.com/log/"  title="王凯心得" target="_blank">王凯心得</a></li>
            <li><a href="http://itbyc.com/travel/" title="雨在路上" target="_blank">雨在路上</a></li>
            <li><a href="http://itbyc.com/regex/regex.html" title="正则表达式" target="_blank">正则表达式</a></li>
        </ul>      
        </nav>
        <p class="slider"> 
        <a href="#">这个世界根本不存在“不会做”这回事，当你失去所有依靠的时候，你自然就什么都会了。</a>
        </p>
        <br>
        <div class="vcard" style="color:#c00">
            <a href="/" target="_blank" title="个人档案"><img src="./img/wuerqiaola.jpg" alt="个人网站" class="photo" height="124" width="93"></a>
              <p class="fn">姓名:王凯</p>
              <p class="nickname">网名：二狗子</p>
              <p class="role">职业：召唤师峡谷ADC</p>
              <p class="url">主页：itbyc.com</p>
              <p class="address">现居：湖北武汉</p>
        </div>
    <p id="animation" class="qun" style="color:#00F">网站开发+QQ：1072253293  </p>
    <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="clear:both">
        <a class="bds_qzone"></a>
        <a class="bds_tqq"></a>
        <a class="bds_t163"></a>
        <a class="bds_tsina"></a>
        <span class="bds_more"></span>
        <a class="shareCount"></a>
    </div>
    <br>
    <div class="hotcomm">
      <h2> <a href="/">精彩文章推荐</a></h2>
      <br>
      <ul>
        <li><a title="个人博客的内页如何优化" href="blog.php">个人博客的内页如何优化</a></li>
        <li><a title="个人博客如何减少跳出提高流量" href="blog.php">个人博客如何减少跳出提高流量</a></li>
        <li><a title="个人博客品牌形象如何建立" href="blog.php">个人博客品牌形象如何建立</a></li>
        <li><a title="个人博客如何获得优质外链" href="blog.php">个人博客如何获得优质外链</a></li>

        </ul>
    </div>
        <br>
       <div class="newbolg">
          <h2><a href="/">技术探讨</a></h2>
          <br>
             <ul class="rank">
            <li><a title="如何在网页设计中使用留白？" href="blog.php">如何在网页设计中使用留白？</a></li>
            <li><a title="2014，感谢有你" href="blog.php">2014，感谢有你</a></li>
            <li><a title="网站跳出率高的优化方案" href="blog.php">网站跳出率高的优化方案</a></li>
            <li><a title="PHP如何获取内存使用情况" href="blog.php">PHP如何获取内存使用情况</a></li>
            <li><a title="PHP动态页生成静态页的程序代码" href="blog.php">PHP动态页生成静态页的程序代码</a></li>
            </ul>  
            <br>
        <h2><a href="/">点击排行</a></h2>
        <br>
             <ul class="rank">
            <li><a title="discuz教程：门户文章添加tag标签功能" href="/cms/discuz/16688.html">discuz教程：门户文章添加tag标</a></li>
            <li><a title="discuz允许游客表态的方法" href="/cms/discuz/16684.html">discuz允许游客表态的方法</a></li>
            <li><a title="discuz会员忘记安全提问的解决方法" href="/cms/discuz/16683.html">discuz会员忘记安全提问的解决方</a></li>
            <li><a title="dedecms搜索页面只显示10条搜索结果的解决方法" href="/web/dedecms/16680.html">dedecms搜索页面只显示10条搜索</a></li>
            </ul>   
        </div>
<!-- <div class="tag_yun">
    <h2>博客热点</h2>
    <div class="tag_yun_list">
    {\dede\:\tag row='50' getall='1' sort='hot'}
<a style="[field:total runphp=yes]@me=getTagStyle(); [/field:total];" title="[field:tag /]([field:total /])" href="[field:link/]">[field:tag /]</a>
{\/dede\:\tag}
    </div>
    </div>
-->
</aside>
</div>
		<!-- ENDS MAIN -->
	</div>
	<!-- ENDS WRAPPER -->

	<!-- FOOTER -->
	<div id="footer">
		<!-- FOOTER-WRAPPER -->
		<div id="footer-wrapper">
			<!-- footer-cols -->
			<ul id="footer-cols">
				<li class="col clear-col">
					<h6>About the theme</h6>
					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
				</li>
				<li class="col">
					<h6>Categories</h6>
					<ul>
						<li><a href="#">Webdesign</a></li>
						<li><a href="#/">Wordpress</a></li>
						<li><a href="#">Photo</a></li>
						<li><a href="#">Code</a></li>
						<li><a href="#">Web design</a></li>
						<li><a href="#/">Marketplace</a></li>
						<li><a href="#">Writting</a></li>
						<li><a href="#">Drawings</a></li>
					</ul>
				</li>
				<!-- Flickr -->
				<li class="col">
					<h6>Flickr stream</h6>
					
				</li>
			<!-- ENDS Flickr -->
			</ul>
			<!-- ENDS footer-cols -->
			<!-- footer-bottom -->
			<div id="footer-bottom">
				<div id="bottom-left">
					&copy; 2011 Ansimuz. All Rights Reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
				</div>
				<div id="bottom-right">To top</div>
			</div>
			<!-- ENDS footer-bottom -->
		</div>
		<!-- ENDS FOOTER-WRAPPER -->
	</div>
	<!-- ENDS FOOTER -->
	
	
	</body>
</html>